<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Draw</title>
</head>
<body>

</body>
</html><!DOCTYPE html>
<html>
<head>
    <title>Draw Features</title>
    <meta charset="UTF-8">
    <script src="OpenLayers4.3.1/ol.js"></script>
    <link rel="stylesheet" href="OpenLayers4.3.1/ol.css" type="text/css">
</head>
<body>
<div id="map" class="map"></div>
<form class="form-inline">
    <label>Geometry type &nbsp;</label>
    <select id="type">
        <option value="Point">Point</option>
        <option value="LineString">LineString</option>
        <option value="Polygon">Polygon</option>
        <option value="Circle">Circle</option>
        <option value="None">None</option>
    </select>
</form>
<script>

    function styleFunction() {
        return [
            new ol.style.Style({
                fill: new ol.style.Fill({
                    color: 'rgba(255,255,255,0.4)'
                }),
                stroke: new ol.style.Stroke({
                    color: '#3399CC',
                    width: 1.25
                }),
                text: new ol.style.Text({
                    font: '12px Calibri,sans-serif',
                    fill: new ol.style.Fill({ color: '#000' }),
                    stroke: new ol.style.Stroke({
                        color: '#fff', width: 2
                    }),
                    // get the text from the feature - `this` is ol.Feature
                    // and show only under certain resolution
                    text: map.getView().getZoom() > 12 ? this.get('description') : ''
                })
            })
        ];
    }
    var layer  = new ol.layer.Image({
        source:  new ol.source.ImageWMS({
            url: 'http://localhost:8080/geoserver/wms',
            params: {'LAYERS': 'chinaMainLand',tiled:true},
            serverType: 'geoserver',
            crossOrigin: 'anonymous'
        })
    })
    var guilin = ol.proj.fromLonLat([110.290195,25.273566]);
    var source = new ol.source.Vector({wrapX: false});

    var vector = new ol.layer.Vector({
        source: source
    });

    var map = new ol.Map({
        layers: [layer, vector],
        target: 'map',
        view: new ol.View({
            center:guilin,
            zoom: 15,
            maxZoom:18,
            minZoom :10
        })
    });

    var modify = new ol.interaction.Modify({source: source});
    modify.on('modifyend', function(e) {
        var features = e.features.getArray();
        console.log(features.length);
        for (var i = 0; i < features.length; i++) {
            var rev = features[i].getRevision();
            if (rev > 1) {
                console.log("feature with revision:" + rev + " has been modified");
            }
        }
    });
    map.addInteraction(modify);


    var typeSelect = document.getElementById('type');

    var draw; // global so we can remove it later
    function addInteraction() {
        var value = typeSelect.value;
        if (value !== 'None') {
            draw = new ol.interaction.Draw({
                source: source,
                type: /** @type {ol.geom.GeometryType} */ (typeSelect.value),
//                freehand: true   //是否可以随手画
            });
            draw.on('drawend', function(e) {
                var currentFeature = e.feature;//this is the feature fired the event

                currentFeature.set('description', "test");
                currentFeature.setStyle(styleFunction);

                var writer = new ol.format.GeoJSON();
                var geojsonStr = writer.writeFeature(currentFeature,{featureProjection:"EPSG:3857",decimals:6});
                console.log(geojsonStr);
            });

            map.addInteraction(draw);
        }
    }


    /**
     * Handle change event.
     */
    typeSelect.onchange = function() {
        map.removeInteraction(draw);
        addInteraction();
    };

    addInteraction();
</script>
</body>
</html>